<template>
  <transition name='fade'>
    <div class="box">
      <header class="header1">订单详情</header>
	    <div class="orderStatu">
	    	<div :class="{orderStatu1:isa,orderStatu2:isb}" @click="oring()">进行中</div>
	      <div :class="{orderStatu1:isb,orderStatu2:isa}" @click="ored()">已完成</div>
	    </div> 
      <div class="content">
      	<div class="oring order" v-show="isshow1">
      		<ordering />
      	</div>
      	<div class="ored order" v-show='isshow2'>
      		<orderd />
      	</div>
      </div>
    </div>
  </transition>
</template>
<script>
import orderd from '@/components/Indent/orderd'
import ordering from '@/components/Indent/ordering'
export default {
	data(){
		return{
			isshow1:true,
			isshow2:false,
			isa:true,
			isb:false,
		}
	},
	methods:{
		oring(){
			this.isshow1 = true,
			this.isshow2 = false,
			this.isa = true,
			this.isb = false
		},
		ored(){
			this.isshow2=true,
			this.isshow1=false,
			this.isa = false,
			this.isb = true
		}
	},
	components:{
		orderd,
		ordering
	}
}
</script>
<style lang="scss">
	@import '@/lib/reset.scss';
	.orderStatu{
		@include rect(100%, 0.44rem);
		@include flexbox();
	  justify-content:space-between;
	  @include align-items(); 
	  @include background-color(#eee);
	  .orderStatu1{
	  	@include flexbox();
	  	@include rect(50%,0.44rem);
	  	@include align-items();
	  	justify-content:center;
	  	background:#aaa; 
	  }
	  .orderStatu2{
	  	@include rect(50%,0.4rem)
	  	@include flexbox();
	  	@include align-items(); 
	  	justify-content:center;
	  }
	}
	.header1{
		@include rect(100%, 0.44rem);
		@include flexbox();
		@include align-items(); 
		justify-content:center;
		@include background-color(#ccc);
		color:#000;
		font-weight:900;
	}
	.order{
		.content{
			ul{
				@include rect(90%, auto);
				margin:0 auto;
				li{
					@include rect(100%, 1.60rem);
					@include background-color(#ccc);
					margin:20px 0;
					border:1px solid #fff;
					border-radius:15px;
					font-size: 12px;
					.message{
						@include rect(100%, 0.30rem);
						border-bottom:1px solid #400;
						padding:0 25px 0 13px;
						@include flexbox();
						@include align-items(); 
						justify-content:center;
						span{
							line-height: 0.20rem;
							display: inline-block;
						}
						.null{
							@include rect(0.20rem, 0.20rem);
							@include background-color(#f66);
							margin-right: 25px;
							border-radius:5px;
						}
						.hostle{
							@include flex();
							@include rect(100%, 0.20rem);
						}
						.state{
							@include rect(0.5rem, 0.20rem);
							text-align: center;
						}
					}
					.orderMain{
						@include rect(80%, 0.84rem);
						@include flexbox();
						margin:0 auto;
						flex-direction:column;
						p{
							@include rect(100%, 0.28rem);
							line-height: 28px;
						}
					}
					.orderSend{
						@include rect(80%, 0.35rem);
						margin:0 auto;
						span{
							display: inline-block;
							@include rect(0.8rem, 0.32rem);
							text-align: center;
							line-height: 32px;
							float: right;
							border: 1px solid #42B983;
							border-radius:15px;
							background: #42B983;
						}
					}
				}
			}
		}
	}
</style>